<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="append"></div>
</body>
<script>
    let data=[
        {name:"",
        author:"",
            page:1,
            publish:"不知道"
        },
        {name:"",
            author:"",
            page:1,
            publish:"不知道"},
        {name:"",
            author:"",
            page:1,
            publish:"不知道"},
        {name:"",
            author:"",
            page:1,
            publish:"不知道"},

    ]
    let   htmlStr= "<div class=\"tableOfInfo\" >"
        +"<table style='background-color: rgba(1,1,1,0.3);height: 100px;width: 100%;text-align: center;border-radius: 3px'>"
        +"<tr style='font-size: 20px ;background-color: rgba(1,1,1,0.2);font-weight: 700;color: #f0f6fc;border-radius: 3px'>"+
        "<th style=''>书名</th>" +"<th style=''>作者</th>"+"<th style=''>页数</th>"+"<th style=''>出版日期</th>"+"<th>操作</th>"
        +"</tr>"
    for (let i=0;i<data.length;i++)
    {
        //不要忘记``的写法
        htmlStr+="<tr>"+
            "<td style='border-bottom: 1px solid rgba(1,1,1,0.2);font-size: 15px;font-weight: 500;color: #f0f6fc'>"+data[i].name+"</td>"+
            "<td style='border-bottom: 1px solid rgba(1,1,1,0.2);font-size: 15px;font-weight: 500;color: #f0f6fc'>"+data[i].author+"</td>"+
            "<td style='border-bottom: 1px solid rgba(1,1,1,0.2);font-size: 15px;font-weight: 500;color: #f0f6fc'>"+data[i].page+"</td>"+
            "<td style='border-bottom: 1px solid rgba(1,1,1,0.2);font-size: 15px;font-weight: 500;color: #f0f6fc'>"+data[i].publish+"</td>"+
            "<td><button class='delete' onclick=''>删除</button ><button class='modify' onclick=''>修改</button></td>"
        "</tr>"
    }
    htmlStr+="</table>"+"</div>"
    htmlStr+="<div class=\"pageTurn\" style=\"margin-top: 10px;background-color: rgba(1,1,1,0.3);flex-basis: 100px;display: flex;justify-content: space-around\">\n" +
        "                    <button class=\"pageDown\" style=\"flex-basis: 100px;background-color: rgba(1,1,1,0.2);text-align: center;line-height: 100px;color: #f0f6fc\" onclick=\"\" onmouseenter=\"\" onmouseleave=\"\">上一页</button>\n" +
        "                    <div class=\"currentPage\" style=\"flex-basis: 100px;background-color: rgba(1,1,1,0.2);text-align: center;line-height: 100px;color: #f0f6fc\">第1页</div>\n" +
        "                    <button class=\"pageUp\" style=\"flex-basis: 100px;background-color: rgba(1,1,1,0.2);text-align: center;line-height: 100px;color: #f0f6fc\" onclick=\"\" onmouseenter=\"\" onmouseleave=\"\">下一页</button>\n" +
        "                </div>"

    let append=document.querySelector("#append")
    append.innerHTML=htmlStr

</script>
</html>